<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<template>
					<div class="block">
						<span class="demonstration">带快捷选项</span>
						<el-date-picker v-model="value1" align="right" type="date" placeholder="选择日期"
							:picker-options="pickerOptions">
						</el-date-picker>
					</div>
				</template>
			</div>
			<hr />
			
			<div>
				<template>
					<div class="block">
						<span class="demonstration1">带快捷选项</span>
						<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							:picker-options="pickerOptions">
						</el-date-picker>
					</div>
				</template>
			</div>
			<hr />
			
			<div>
				<template>
				  <div class="block">
				    <span class="demonstration">带快捷选项</span>
				    <el-date-picker
				      v-model="value3"
				      type="monthrange"
				      align="right"
				      unlink-panels
				      range-separator="至"
				      start-placeholder="开始月份"
				      end-placeholder="结束月份"
				      :picker-options="pickerOptions3">
				    </el-date-picker>
				  </div>
				</template>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value1: '',
				value2: '',
				value3: '',
				pickerOptions1: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}],
				},
				 pickerOptions3: {
				          shortcuts: [{
				            text: '本月',
				            onClick(picker) {
				              picker.$emit('pick', [new Date(), new Date()]);
				            }
				          }, {
				            text: '今年至今',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date(new Date().getFullYear(), 0);
				              picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近六个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setMonth(start.getMonth() - 6);
				              picker.$emit('pick', [start, end]);
				            }
				          }]
				        },
			},
		})
	</script>
</html>